<template>
<div>
  <div id="root" @click="changetheme()">通过sass改变主题色</div>
  <ul>
    <li>1.通过预设几套全局样式主题</li>
    <li>2.通过js设置data-theme 结合sass改变主题色</li>
    <li>3.给css #root应用样式</li>
  </ul>
  <h1>通过js 修改文档--el-color-primary</h1>
  <el-color-picker v-model="color" show-alpha :predefine="predefineColors" @change="changElement" />
  <el-button type="primary"></el-button>
</div>
</template>
<script setup lang="ts">
const theme = ref('blue')
const changetheme = () => {
  if (theme.value === 'blue') {
    theme.value = 'red'
  } else if (theme.value === 'red') {
    theme.value = 'yellow'
  } else if (theme.value === 'yellow') {
    theme.value = 'blue'
  }
  document.documentElement.setAttribute('data-theme', theme.value)
}
changetheme()

const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])

const changElement = (value: string) => {
  document.documentElement.style.setProperty('--el-color-primary', value)
}
</script>
<style scoped lang="scss">
$t: $theme;
#root {
  width: 100%;
  height: 100vh;
  @include theme-get-all;
}
</style>
